<template>
  <div class="container">
    <div style="padding:10px 0;">
      <div style="padding:15px;border:1px solid #eee;">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/member'}">会员列表</el-breadcrumb-item>
          <el-breadcrumb-item>会员必填项配置</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>
    <div class="list-group" v-for="item in check_list">
        <el-row :gutter="20">
            <el-col :span="3">
                <div class="list-title">{{ item.name }}</div>
            </el-col>
            <el-col :span="21">
                <el-switch 
                    @change="change_userinfo_check($event, item.id)"
                    v-model="item.is_required" 
                    active-text="必填"
                    :data-id="item.id"
                    :active-value="1"
                    :inactive-value="0"
                    >
                </el-switch>
            </el-col>
        </el-row>
    </div>
  </div>
</template>

<script>
import api from '@/api/index';
export default {
    name: 'admin',
    data() {
        return {
            check_list: {}
        };
    },
    mounted() {
        this.initselectList();
    },
    methods: {
        //列表加载
        initselectList() {
            const loading = this.$loading({ text: '加载中...' });
            this.$http
                .get(api.TECHNICIAN_CHECK_LIST)
                .then((res) => {
                    loading.close();
                    console.log('下拉选择列表', res);
                    if (res.code == 1) {
                        this.check_list = res.data || {};
                    } else {
                        this.$message.error(res.msg);
                    }
                })
                .catch((err) => {
                    this.$message.error(err.msg);
                });
        },
        change_userinfo_check(e, id) {
            const data = {
                id: id,
                is_required: e
            };
            this.$http
                .post(api.TECHNICIAN_CHECK_USERINFO, data)
                .then((res) => {
                    if (res.code == 1) {
                        return true;
                    } else {
                      return this.$message.error(res.msg);
                    }
                })
                .catch((err) => {
                    this.$message.error(err.msg);
                    return false;
                });
        }
    }
};
</script>

<style scoped>
.handle-box,
.list-group {
    padding: 6px 0;
}
.list-title {
    height: 24px;
    line-height: 24px;
    font-size: 14px;
    color:#333;
}
.red {
    color: #f56c6c;
}
</style>